<template>
  <el-dialog
    title="新增记录"
    :visible.sync="dialogVisible"
    width="400px"
    :before-close="handleClose"
    :close-on-click-modal="false"
  >
    <div class="dialog">
      <div class="dialog-list">
        <label require="true">日期:</label>
        <div class="span">
            <el-date-picker
            v-model="dateRange"
            size="small"
            style="width: 240px"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </div>
      </div>
      <div class="dialog-list">
        <label require="true">项目:</label>
        <div class="span">
            <el-select size="small" v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="dialog-list">
        <label require="true">日期:</label>
        <div class="span"></div>
      </div>
      <div class="dialog-list">
        <label require="true">日期:</label>
        <div class="span"></div>
      </div>
      <div class="dialog-list">
        <label require="true">日期:</label>
        <div class="span"></div>
      </div>
      <div class="dialog-list">
        <label require="true">日期:</label>
        <div class="span"></div>
      </div>
      <div class="dialog-list">
        <label require="true">日期:</label>
        <div class="span"></div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="dialogVisible = false">提交</el-button>
      <el-button @click="(dialogVisible = false), updateKey()">取 消</el-button>
    </span>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: true,
      dateRange:"",
      options: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ],
      value: "",
    };
  },
  methods: {
    open() {
      this.dialogVisible = true;
    },
    updateKey() {
      this.$emit("update:key", new Date().getTime());
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
          this.updateKey();
        })
        .catch(_ => {});
    }
  }
};
</script>

<style lang="scss" scoped>
.el-dialog__wrapper {
  .dialog {
    width: 100%;

    &-list {
      width: 100%;
      height: 40px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      margin:10px 0;

      label{
          width: 100px;
          text-align: right;
          padding: 0 10px;
      }

      label[require="true"]::before {
        content: "*";
        color: red;
      }

      .span{
          width: calc(100% - 100px);
          height: 100%;
          display: flex;
          align-items: center;

          .el-select,.el-date-editor{
              width: 100%!important;
          }
      }
    }
  }
}
</style>
